<template>
	<z-nav-bar :title="title">
		<template v-slot:right>
			<view v-if="schemeData.id" class="uni-red" @click="delSchemeData">删除</view>
		</template>
	</z-nav-bar>
	<view class="flex_fsc uni-mx-32 uni-my-20">
		<view>
			<text class="uni-red">*</text>
			方案名称
		</view>
		<input
			v-model="schemeData.name"
			type="text"
			class="input-box"
			placeholder="简要描述方案名称"
			placeholder-class="uni-placeholder"
		/>
	</view>
	<view class="flex_fsc uni-mx-32 uni-my-20">
		<view>
			<text class="uni-ml-10"></text>
			方案描述
		</view>
		<textarea v-model="schemeData.description"
			class="input-box"
			style="height: 140rpx;padding: 16rpx;"
			placeholder="方案描述"
			placeholder-style="color:#CCCCCF"></textarea>
	</view>
	<view class="line-spacing line-spacing-height"></view>
	<view>
		<view class="item-title flex_sbc">
			<view>
				<text class="uni-red">*</text>
				添加方案描述标签
			</view>
			<image
				v-if="schemeData.descriptionTag && schemeData.descriptionTagList"
				:src="setting.oss_pub_domain + '/app-img/icon/icon_edit.png'"
				class="icon-size-32"
				@click="selTag('descriptionTag')"
			></image>
		</view>
		<z-add-button v-if="!schemeData.descriptionTag || !schemeData.descriptionTagList" text="添加标签" class="uni-mx-32 uni-mb-32" style="width: 686rpx;" @click="selTag('descriptionTag')"></z-add-button>
		<view v-if="schemeData.descriptionTagList" class="flex_fsc flex_wrap uni-mx-32">
			<view v-for="(tag, index) in schemeData.descriptionTagList" :key="index" class="tag">
				{{ tag.map((item) => item.dictValue).join(' > ') }}
			</view>
		</view>
		<view class="line-spacing"></view>
	</view>
	<view>
		<view class="item-title flex_sbc">
			<view>添加训练环境</view>
			<image
				v-if="schemeData.environmentList && schemeData.environmentList.length"
				:src="setting.oss_pub_domain + '/app-img/icon/icon_edit.png'"
				class="icon-size-32"
				@click="selTag('environment')"
			></image>
		</view>
		<z-add-button v-if="!schemeData.environmentList || !schemeData.environmentList.length" text="添加环境" class="uni-mx-32 uni-mb-32" style="width: 686rpx;" @click="selTag('environment')"></z-add-button>
		<view v-if="schemeData.environmentList" class="flex_fsc flex_wrap uni-mx-32">
			<view v-for="(tag, index) in schemeData.environmentList" :key="index" class="tag">
				{{ tag.map((item) => item.dictValue).join(' > ') }}
			</view>
		</view>
		<view class="line-spacing"></view>
	</view>
	<view class="line-spacing line-spacing-height"></view>
	<view class="uni-mx-32 uni-pb-32">
		<view class="z-font-32 text-w uni-mt-32">添加图片或视频</view>
		<z-preview-media :srcStr="schemeData.material" @change="materialChange" addButton delIcon></z-preview-media>
	</view>
	<view class="line-spacing line-spacing-height"></view>
	<bottom-box :buts="buts" @change="submit"></bottom-box>
</template>

<script setup>
import { addScheme, editScheme, delScheme } from '@/api/scheme.js';
import { onLoad } from '@dcloudio/uni-app';
import { ref, reactive, getCurrentInstance } from 'vue';

const { proxy: that } = getCurrentInstance();
const eventChannel = that.getOpenerEventChannel();

const schemeData = reactive({
	name: '',
	description: '',
	descriptionTag: '',
	descriptionTagList: '',
	environment: '',
	environmentList: [],
	material: ''
});

Object.assign(schemeData, uni.getStorageSync('edit-scheme') || {});
const listKey = ['descriptionTag', 'reason', 'environment', 'bodyPosition'];
const title = schemeData.id ? ' 编辑方案' : '新增方案';
console.log(schemeData);

const index = 
onLoad((opt) => {
	const select = parseInt(opt.select || 0);
	if (select) {
		const tmpData = uni.getStorageSync('questionCopy');
		if (tmpData.name) schemeData.name = tmpData.name + '的解决方案';
		schemeData.description= tmpData.description;
		schemeData.descriptionTag = tmpData.descriptionTag;
		schemeData.descriptionTagList = tmpData.descriptionTagList;
		schemeData.environment = tmpData.environment;
		schemeData.environmentList = tmpData.environmentList;
	}
	
});

const buts = [
	{
		label: '积累到方案库',
		bgColor: 'uni-color-main-bg'
	}
];

function submit() {
	const { name, descriptionTag, environment, description, material } = schemeData;
	if (!schemeData.name) return that.tools.alert('请输入方案名称');
	if (!schemeData.descriptionTag) return that.tools.alert('请选择方案描述标签');
	const postData = {
		name,
		descriptionTag,
		environment,
		description,
		material
	};
	const funName = schemeData.id ? editScheme : addScheme;
	funName(postData, schemeData.id).then((res) => {
		if (!schemeData.id) schemeData.id = res.id;
		eventChannel.emit('editDone', schemeData);
		that.tools.alert('新方案已积累到方案库')
		setTimeout(() => {
			uni.navigateBack()
		}, 1000)
	});
}

function selTag(type) {
	console.log(type);
	uni.setStorageSync('tagSelList', schemeData[type + 'List']);
	uni.navigateTo({
		url:
			type == 'descriptionTag'
				? '/pages/question/select-tag/select-tag'
				: '/pages/question/add-item/add-item?type=2',
		events: {
			getTag: (data) => {
				if (type == 'descriptionTag' && !schemeData.description)
					schemeData.description = `${data.obj[0][0].dictValue}-->${data.obj[0][1].dictValue}`;
				schemeData[type] = data.code;
				schemeData[type + 'List'] = data.obj;
				schemeData[type + 'Name'] = data.obj
					.map((item) => item.map((el) => el.dictValue).join('-->'))
					.join(',');
			}
		}
	});
}

// 选择视频或图片
function materialChange(e) {
	schemeData.material = e;
}

function delSchemeData() {
	uni.showModal({
		title: '删除提示',
		content: '确定要删除该问题吗？',
		success: (res) => {
			if (res.confirm) {
				delScheme(schemeData.id).then((res) => {
					uni.navigateBack();
					that.tools.alert('删除成功');
					eventChannel.emit('delDone');
				});
			}
		}
	});
}
</script>

<style lang="scss" scoped>
@import '../../question/edit/edit.scss';
</style>
